<template>
    <div id="create_allocation">
        <el-dialog
        title="新建调拨单"
        :visible.sync="dialogVisible"
        :close-on-click-modal="false"
        width="30%"
        :before-close="handleClose">
            <el-form v-model="formData" label-position="left" label-width="80px">
                <el-form-item label="调出门店:">
                    <el-select style="width: 100%" size="small" v-model="formData.outWarehouseObj" placeholder="请选择调出门店" filterable @change="handleSelect">
                        <el-option-group
                        v-for="group in storeList"
                        :key="group.cityId"
                        :label="group.city">
                            <el-option
                                v-for="item in group.list"
                                :key="item.storeNo"
                                :label="item.storeName"
                                :disabled="item.disabled"
                                :value="item.storeNo+',' +item.storeName">
                            </el-option>
                        </el-option-group>
                    </el-select>
                </el-form-item>
                <el-form-item label="调入门店:">
                    <el-select style="width: 100%" size="small" v-model="formData.inWarehouseObj" placeholder="请选择调入门店" filterable @change="handleSelect">
                        <el-option-group
                        v-for="group in storeList"
                        :key="group.cityId"
                        :label="group.city">
                            <el-option
                                v-for="item in group.list"
                                :key="item.storeNo"
                                :label="item.storeName"
                                :disabled="item.disabled"
                                :value="item.storeNo+',' +item.storeName">
                            </el-option>
                        </el-option-group>
                    </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button size="small" @click="handleClose">取 消</el-button>
                <el-button size="small" type="primary" @click="handleSubmit">确 定</el-button>
            </span>
        </el-dialog>
        <addAllocationGoods v-if="isShow" :transferId="transferId" :isShow="isShow" @cancelAddAllocationGoods="cancelAddAllocationGoods" :allocationInfo="allocationInfo"></addAllocationGoods>
    </div>
</template>
<script>
    import addAllocationGoods from './addAllocationGoods'
    export default {
        props: ['isShowCreate'],
        components: {addAllocationGoods},
        computed: {
            dialogVisible: {
                get() {
                    return this.isShowCreate;
                },
                set() {

                }
            }
        },
        data() {
            return {
                userInfo: JSON.parse(sessionStorage.getItem('userInfo')),
                formData: {
                    outWarehouseObj: '',
                    senderStore: '',
                    inWarehouseObj: '',
                    receiverStore: '',
                    receiverStoreNo: '',
                    senderStoreNo: '',
                },
                storeList: [],
                isShow: false,
                transferId: '',
                allocationInfo: ''
            }
        },
        mounted() {
            this.getStoreListByGroup()
        },
        methods: {
            getStoreListByGroup() {
                this.$server.systemControlApi.getStoreListByGroup().then(res => {
                    if(res.data.length > 0) {
                        res.data.forEach(item => {
                            if(item.list && item.list.length > 0) {
                                item.list.forEach(itemo => {
                                    itemo.disabled= false
                                })
                            }
                        })
                    }
                    this.storeList= res.data
                })
            },
            
            handleSelect(val) {
                console.log(val)
                let checkedStore= val.split(',')[0]
                this.filteStore(checkedStore, this.storeList)
            },
            filteStore(id, arr) {
                for(let i=0; i< arr.length; i++) {
                    if(arr[i].list && arr[i].list.length > 0) {
                        arr[i].list.forEach(item => {
                            if(id == item.storeNo) {
                                item.disabled= true
                            }else{
                                item.disabled= false
                            }
                        })
                    }else{
                        continue;
                    }
                }
                return arr;
            },
            handleClose() {
                this.$confirm('确认关闭？').then(_ => {
                    this.$emit('cancelShow', false)
                }).catch(_ => {});
            },
            handleSubmit() {
                try {
                    let {outWarehouseObj, inWarehouseObj}= this.formData
                    if(!outWarehouseObj || !inWarehouseObj) {
                        this.$message({
                            message: '请选择调入、调出门店',
                            type: 'error',
                            duration: 2000
                        })
                    }else{
                        let params= {
                            applyUser: this.userInfo.personName,
                            applyUserId: this.userInfo.userId,
                            createUser: this.userInfo.personName,
                            createUserId: this.userInfo.userId,
                            receiverStoreNo: inWarehouseObj.split(',')[0],
                            senderStoreNo: outWarehouseObj.split(',')[0],
                            receiverStore: inWarehouseObj.split(',')[1],
                            senderStore: outWarehouseObj.split(',')[1],
                        }
                        this.$server.stockControlApi.createAllocation(params).then(res => {
                            this.transferId= res.data.transferId
                            this.allocationInfo= res.data
                            this.isShow= true
                        })
                    }
                }catch(err) {this.$paramsError(err)}
                
            },
            cancelAddAllocationGoods(title) {
                this.isShow= title
                this.$emit('cancelShow', false)
            }
        }
    }
</script>
<style lang="less" scoped>
    .el-select {
        width: 100%;
    }
</style>